<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
    <head th:include="include :: header"></head>
    <body class="hold-transition skin-blue sidebar-mini">

    <div class="modal fade" data-backdrop="static" data-keyboard="false" id="modal-change-project">
        <div class="modal-dialog" style="width:1200px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">项目信息</h4>
                </div>
                <div class="modal-body">
                    <form id="projectForm" class="form-horizontal">
                        <input type="hidden" id="id" name="id">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">项目名称</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="name" placeholder="">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">客户</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="client" placeholder="">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">订单号</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="orderNum" placeholder="">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">代码</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="code" placeholder="">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">件数</label>
                                    <div class="col-sm-8">
                                        <input type="number" class="form-control" name="num" placeholder="">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">非标件</label>
                                    <div class="col-sm-8">
                                        <input type="number" class="form-control" name="non" placeholder="">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">面积</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="area" placeholder="">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">喷涂要求</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="spray" placeholder="">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">是否拼装</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" name="assemble" title="">
                                            <option value="1" selected>是</option>
                                            <option value="0">否</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">铝背楞类型</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" name="backType" title="">
                                            <option value="0" selected>请选择</option>
                                            <option value="1">一代</option>
                                            <option value="2">二代</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">是否有铁件</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" name="iron" title="">
                                            <option value="1" selected>是</option>
                                            <option value="0">否</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">是否半铝支撑</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" name="halfSupport" title="">
                                            <option value="1" selected>是</option>
                                            <option value="0">否</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">订单类型</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" name="orderType" title="">
                                            <option value="1">体系楼</option>
                                            <option value="2">备库</option>
                                            <option value="3">财务</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">客户要求发货时间</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control datepicker" name="shipTime" placeholder="" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">设计文件下发日期</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control datepicker" name="designTime" placeholder="" readonly>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">

                                <div class="form-group">
                                    <label class="col-sm-4 control-label">计划完成时间</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control datepicker" name="planCompleteTime" placeholder="" readonly>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">计划发货时间</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control datepicker" name="planShipTime" placeholder="" readonly>
                                    </div>
                                </div>
                            </div>
                            <!--<div class="col-md-12">
                                <div class="form-group" id="file-div">

                                </div>
                            </div>-->

                            <div class="col-md-12">

                                <!--<div class="form-group">
                                    <label class="col-sm-2 control-label">上传文件</label>
                                    <div class="col-sm-10">
                                        <input type="file" multiple="multiple" name="file">
                                        <p class="help-block">请选择所需要上传的文件</p>
                                    </div>
                                </div>-->

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">生产厂</label>
                                    <div class="col-sm-10">
                                        <label class="checkbox-inline icheck" th:each="factory:${factories}">
                                            <input type="checkbox" name="factoryIds" class="minimal-red" th:value="${factory.id}">[[${factory.name}]]
                                        </label>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">备注</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="remark" placeholder="">
                                    </div>
                                </div>

                            </div>

                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" id="btn-change-project">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

        <section class="content-header">
            <h1>项目变更</h1>
        </section>
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <form id="queryForm">
                                <div class="row">
                                    <div class="form-inline">
                                        <div class="form-group" style="margin-right: 10px;">
                                            <label>名称</label>
                                            <input type="text" name="name" class="form-control" placeholder="请输入项目名称或订单号或代码">
                                        </div>
                                        <div class="form-group" style="margin-right: 10px;">
                                            <label>数量</label>
                                            <input type="text" name="num" class="form-control" placeholder="请输入数量">
                                        </div>
                                        <div class="form-group" style="margin-right: 10px;">
                                            <label>生产厂</label>
                                            <select name="factories" class="form-control">
                                                <option value="" selected="selected">请选择</option>
                                                <option th:each="factory:${factories}" th:value="${factory.name}" th:text="${factory.name}"></option>
                                            </select>
                                        </div>
                                        <!--<div class="form-group" style="margin-right: 10px;">
                                            <label>年度</label>
                                            <select id="year" name="year" class="form-control">
                                                <option value="" selected="selected">请选择</option>
                                            </select>
                                        </div>-->
                                        <button type="button" class="btn btn-success" id="btn-search">
                                            <!--<i class="fa fa-search"></i>-->
                                            <span class="Bold">搜索</span>
                                        </button>
                                    </div>
                                </div>
                                <!--<div class="row" style="margin-top: 10px">
                                    <div class="form-inline">

                                        <div class="form-group" style="margin-right: 10px;">
                                            <label>时间</label>
                                            <input type="text" class="form-control datepicker" name="startTime" readonly="readonly"/>
                                            <span>至</span>
                                            <input type="text" class="form-control datepicker" name="endTime" readonly="readonly"/>
                                        </div>
                                    </div>
                                </div>-->
                            </form>
                        </div>
                        <div class="box-body">
                            <table id="bootstrap-table"></table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div th:include="include :: footer"></div>
        <script th:inline="javascript">
            var table;

            /**
             * 打开变更项目模态框模态框
             */
            function openChangeProjectModal(id) {
                js.post({
                    url: ctx + "project/change/id",
                    data: {
                        id: id
                    },
                    success: function (result) {
                        $("#projectForm").fillData(result);
                        /*var html = [];
                        $.each(result.files, function (index,file) {
                            html.push('<div class="row" style="margin-bottom: 5px" id="file-' + file.id + '"><div class="col-md-5 col-md-offset-2">');
                            html.push('<a href="' + file.url + '" target="_blank">' + file.name + '</a>');
                            html.push('</div></div>');
                        });
                        $("#file-div").html(html.join(''));*/
                        result.factoryIds.forEach(function (v, i, arr) {
                            $('input[name="factoryIds"][value="' + v + '"]').attr("checked", true);
                        });
                        js.modal.open("modal-change-project");
                        js.modal.closeLoading();
                    }
                })
            }

            /**
             * 下达任务
             */
            function changeTask() {
                js.submit({
                    url: ctx + "project/change/apply",
                    data: new FormData($("#projectForm")[0]),
                    success: function (result) {
                        if (result.type === web_status.SUCCESS) {
                            js.modal.success(result.msg);
                            js.table.refresh(table);
                            js.modal.hide("modal-change-project");
                        } else {
                            js.modal.warning(result.msg);
                        }
                        js.modal.closeLoading();
                    }
                });
            }

            $(function () {

                /**
                 * 加载列表
                 */
                table = js.table.init({
                    url: ctx + "project/change/list",
                    columns: [
                        {
                            title: '序号', field: 'id', width: '40',
                            formatter: function (value, row, index, field) {
                                return index + 1;
                            }
                        },
                        {title: '项目名称', field: 'name', width: '150'},
                        {title: '订单号', field: 'orderNum', width: '60'},
                        {title: '代码', field: 'code', width: '80'},
                        {title: '数量', field: 'num'},
                        {title: '面积', field: 'area'},
                        {title: '喷涂要求', field: 'spray', width: '80'},
                        {title: '是否拼装', field: 'assemble', width: '80',
                            formatter: function (value, row, index) {
                                if (value === 1) {
                                    return '拼装';
                                }else if (value === 0) {
                                    return '免拼装';
                                }
                            }
                        },
                        {title: '生产厂', field: 'factories', width: '120',
                            formatter: function (value, row, index) {
                                if (value != null) {
                                    return value.split(',').join('<br>');
                                }
                            }
                        },
                        {title: '设计文件<br>下发日期', field: 'designTime', width: '100'},
                        {title: '客户要求<br>发货日期', field: 'shipTime', width: '100'},
                        {title: '计划<br>完成日期', field: 'shipTime', width: '100'},
                        {title: '计划<br>发货日期', field: 'shipTime', width: '100'},
                        {title: '备注', field: 'remark', width: '150'},
                        {
                            title: '操作', width: '40',
                            formatter: function (value, row, index) {
                                var actions = [];
                                actions.push('<a class="btn btn-xs btn-warning" href="javascript:void(0)" onclick="openChangeProjectModal(' + row.id + ')"> 变更</a> ');
                                return actions.join('');
                            }
                        }
                    ]
                });

                /**
                 * 表格搜索
                 */
                $("#btn-search").click(function () {
                    js.table.search(table);
                });

                js.modal.hideEvent("modal-change-project", function () {
                    js.reset("projectForm");
                });

                /**
                 * 下达任务
                 */
                $("#btn-change-project").click(function () {
                    var flag = $('input:checkbox[name="factoryIds"][value="5"]').is(':checked');
                    if ($('input[name="backType"]').val() > 0 && !flag) {
                        js.modal.confirm("项目包含铝背楞，但未选择模板制造五厂，是否继续？", function () {
                            changeTask();
                        });
                    } else if ($('input[name="backType"]').val() < 1 && flag) {
                        js.modal.confirm("项目不含铝背楞，但选择了模板制造五厂，是否继续？", function () {
                            changeTask();
                        });
                    } else {
                        changeTask();
                    }
                });
            });
        </script>
    </body>
</html>
